<template lang="pug">
  .child-bg
    Button.btn-china(type="info" @click="goToChina" v-if="statisticsData") 返回全国地图

    //- 当前点击省/市-统计数据
    .data-statistics.box-shadow-005-01(v-if="currentCity")
      .data-statistics-title {{currentCity.areaName}} 费用统计
      .data-statistics-cont.line-h-28
        .ivu-row
          .ivu-col.ivu-col-span-12(v-for="item, index of statisticsFormItem" :key="index")
            span.display-inline-block.w80.text-right {{item.name}}：
            a.text-eror.font-weight.pr-5(v-if="item.fn === 'gotoStatus'" @click="gotoStatus(item.params.name, item.params.type, item.params.status)") {{currentCity[item.key]}}
            a.text-eror.font-weight.pr-5(v-if="item.fn === 'gotoRouter'" @click="gotoRouter(item.params.name, item.params.isBeHiring)") {{currentCity[item.key]}}
            span 家

    //- 当前点击省份-统计数据
    .data-statistics.box-shadow-005-01(v-if="statisticsData && !currentCity")
      .data-statistics-title {{statisticsData.areaName}} 费用统计
      .data-statistics-cont.line-h-28
        .ivu-row
          .ivu-col.ivu-col-span-12(v-for="item, index of statisticsFormItem" :key="index")
            span.display-inline-block.w80.text-right {{item.name}}：
            a.text-eror.font-weight.pr-5(v-if="item.fn === 'gotoStatus'" @click="gotoStatus(item.params.name, item.params.type, item.params.status)") {{statisticsData[item.key]}}
            a.text-eror.font-weight.pr-5(v-if="item.fn === 'gotoRouter'" @click="gotoRouter(item.params.name, item.params.isBeHiring)") {{statisticsData[item.key]}}
            span {{item.unit}}

    //- 中国地图
    ChartChina(style="height: 1000px; padding-right: 30%;" :value="setChinaData" :geoCoordMap="geoCoordMap" :cityList="cityList" @getAll="getAll" ref="ChartChina" v-if="mapType === 'china'")

    //- 省份地图
    ChartProvince(style="height: 1000px; padding-right: 30%;" :value="setProvinceData" :mapType="mapType" @getBills="getBills" @getCityData="getCityData" ref="ChartProvince" v-else)

    //- 右边小图表
    .sm-echats
      .pall-10.bg-white.border-radius-5.box-shadow-005-01.mb-20
        Shebao(style="height: 200px;" :value="shebaoData" :text="viewFullName + '社保费用统计'" v-if="shebaoData.length")
        .h200.text-gray-ccc.text-center.pt-60.line-h-40.font-16(v-else)
          p {{viewFullName}}社保费用统计
          p 暂无数据

      .pall-10.bg-white.border-radius-5.box-shadow-005-01.mb-20
        Gongjijin(style="height: 200px;" :value="gongjijinData" :text="viewFullName + '公积金费用统计'" v-if="gongjijinData.length")
        .h200.text-gray-ccc.text-center.pt-60.line-h-40.font-16(v-else)
          p {{viewFullName}}公积金费用统计
          p 暂无数据

      .pall-10.bg-white.border-radius-5.box-shadow-005-01.mb-20
        .ivu-row(v-if="shangbaoData.length")
          .ivu-col.ivu-col-span-12
            Shangbao(style="height: 200px;" :value="shangbaoData.slice(0, 6)" :text="viewFullName + '商保1-6月费用统计'" :isSolid="false")
          .ivu-col.ivu-col-span-12
            Shangbao(style="height: 200px;" :value="shangbaoData.slice(7, 12)" :text="viewFullName + '商保7-12月费用统计'" :isSolid="true")
        .h200.text-gray-ccc.text-center.pt-60.line-h-40.font-16(v-else)
          p {{viewFullName}}商保费用统计
          p 暂无数据

      .pall-10.bg-white.border-radius-5.box-shadow-005-01.mb-20
        Xinzi(style="height: 200px;" :value="xinziData" :text="viewFullName + '薪资费用统计'" v-if="xinziData.length")
        .h200.text-gray-ccc.text-center.pt-60.line-h-40.font-16(v-else)
          p {{viewFullName}}薪资费用统计
          p 暂无数据

      .pall-10.bg-white.border-radius-5.box-shadow-005-01.mb-20
        Fuwufei(style="height: 200px;" :value="fuwufeiData" :text="viewFullName + '服务费费用统计'" v-if="fuwufeiData.length")
        .h200.text-gray-ccc.text-center.pt-60.line-h-40.font-16(v-else)
          p {{viewFullName}}服务费费用统计
          p 暂无数据

</template>

<script>
import homeApi from '@/api/home.api.js'
import { ReportManageApi } from '@/api/ReportManage.api.js'
import { SysAreaApi } from '@/api/SysArea.api.js'

import echarts from 'echarts'
import { Shebao, Gongjijin, Shangbao, Xinzi, Fuwufei, ChartChina, ChartProvince } from './modal'
import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

export default {
  inject: ['reload'],

  name: '',

  components: {
    Shebao,
    Gongjijin,
    Shangbao,
    Xinzi,
    Fuwufei,
    ChartChina,
    ChartProvince
  },

  data () {
    return {
      city: ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '湖北', '湖南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '广东', '广西', '海南'],
      chinaData: [],
      provinceData: [],
      shebaoData: [],
      gongjijinData: [],
      shangbaoData: [],
      xinziData: [],
      fuwufeiData: [],
      selected: '',
      currentProvince: null,
      viewFullName: '全国',
      statisticsData: null,
      statisticsFormItem: [
        { key: 'companyCount', name: '客户数量', unit: '家', fn: 'gotoStatus', params: { name: 'customerInformation', type: '', status: '1' } },
        { key: 'agentCount', name: '人事代理', unit: '家', fn: 'gotoStatus', params: { name: 'customerInformation', type: '1', status: '1' } },
        { key: 'laborDispatchCount', name: '劳务派遣', unit: '家', fn: 'gotoStatus', params: { name: 'customerInformation', type: '2', status: '1' } },
        { key: 'outsourcingCount', name: '劳务外包', unit: '家', fn: 'gotoStatus', params: { name: 'customerInformation', type: '3', status: '1' } },
        { key: 'empCount', name: '员工数量', unit: '人', fn: 'gotoRouter', params: { name: 'roster', isBeHiring: '' } },
        { key: 'beHiringCount', name: '在职', unit: '人', fn: 'gotoRouter', params: { name: 'roster', isBeHiring: 0 } },
        { key: 'noBeHiringCount', name: '离职', unit: '人', fn: 'gotoRouter', params: { name: 'roster', isBeHiring: 1 } }
      ],
      mapType: 'china',
      currentCity: null,
      geoCoordMap: [],
      cityNameArr: [],
      provinceList: [],
      cityList: []
    }
  },

  computed: {
    setChinaData () {
      var data = this.chinaData
      data.map(item => {
        item.label = {
          normal: {
            show: false // 有数据的省份隐藏省份名称（在散点层显示）
          }
        }
      })
      return data
    },

    setProvinceData () {
      var data = this.provinceData
      data.map(item => {
        item.label = {
          normal: { color: '#006799' }
        }
        item.itemStyle = {
          normal: { areaColor: '#54c7ff' }
        }
      })
      return data
    }
  },

  created () {
    this.provinceList = JSON.parse(localStorage.getItem('provinceList')) // 全国省份列表
    this.getAll()
  },

  mounted () {
  },

  methods: {
    queryCP () {
      // 返回有数据的省份名字，存为数组
      // var cityNameArr = []
      // this.chinaData.map(item => {
      //   cityNameArr.push(item.name)
      // })

      // 有数据的省份赋地理经纬度      
      var geoCoordMap = []
      var mapFeatures = echarts.getMap('china').geoJson.features
      mapFeatures.forEach(v => {
        var tempObj = {
          name: v.properties.name, // 地区名称
          value: v.properties.cp // 经纬度
        }
        if (this.cityNameArr.indexOf(v.properties.name) !== -1) {
          geoCoordMap.push(tempObj)
        }
      })
      this.geoCoordMap = geoCoordMap
      console.log(this.geoCoordMap)
    },

    // 获取合计信息
    getInfoBy (params) {
      ReportManageApi.getInfoBy(params).then(res => {
        var tempCityNameArr = []
        var tempCityCompanyCountArr = [] // 有数据的省份的客户数
        if (res.status === 200 && res.data.success) {
          var data = res.data.data
          if (params.flag == 0) {
            data.map(item => {
              item.fullName = item.areaName
              item.value = item.companyCount // 客户数量
              var name = ''
              if (['内蒙古', '黑龙江'].indexOf(item.areaName.substring(0, 3)) != -1) {
                name = item.areaName.substring(0, 3)
              } else {
                name = item.areaName.substring(0, 2)
              }
              item.name = name
              tempCityNameArr.push(item.name)
              tempCityCompanyCountArr.push(item.companyCount) // 把有数据的省份的客户数放入数组
            })
            this.chinaData = data
            this.cityNameArr = tempCityNameArr
            this.queryCP()

            console.log('this.cityNameArr 📚 ', this.cityNameArr)
            console.log('tempCityCompanyCountArr 📚 ', tempCityCompanyCountArr)

            // 给全国地图制造散点假数据 start
            var cityArr = []
            this.provinceList.map(item => {
              if (this.cityNameArr.indexOf(item.name.substring(0, 2)) !== -1) {
                // 有数据的省份的客户数相对应的城市的index
                var index = this.cityNameArr.indexOf(item.name.substring(0, 2))
                // 根据客户数量决定显示多少个假数据图标
                var len = Math.ceil(tempCityCompanyCountArr[index] / 5)
                console.log(item.name + '🚩 index: ' + index + ', 将显示的假数据图标为: ' + len + ', 个')
                this.getCity(item.id, len)
              }
            })
            setTimeout(() => {
              this.$refs.ChartChina.initChina()
            }, 1000)
            // 给全国地图制造散点假数据 end
          } else {
            data.map(item => {
              item.name = item.areaName
              tempCityNameArr.push(item.name)
            })
            this.provinceData = data
            this.cityNameArr = tempCityNameArr
          }
        }
      })
    },

    // 获取全国账单信息
    getBills (params) {
      this.viewFullName = params && params.name ? params.name : '全国'
      ReportManageApi.getBills(params).then(res => {
        if (res.status === 200 && res.data.success && res.data.data) {
          this.shebaoData = []
          this.gongjijinData = []
          this.shangbaoData = []
          this.xinziData = []
          this.fuwufeiData = []

          var data = res.data.data
          data.map(item => {
            if (item.category === 1) { // 社保
              this.shebaoData.push(item)
            } else if (item.category === 2) { // 公积金
              this.gongjijinData.push(item)
            } else if (item.category === 4) { // 商保
              this.shangbaoData.push(item)
            } else if (item.category === 8) { // 薪资
              this.xinziData.push(item)
            } else { // 服务费
              this.fuwufeiData.push(item)
            }
          })
        } else {
          this.shebaoData = []
          this.gongjijinData = []
          this.shangbaoData = []
          this.xinziData = []
          this.fuwufeiData = []
        }
      })
    },

    getAll (currentName, currentProvince) {
      this.currentProvince = currentProvince || null
      // this.mapType = currentProvince ? currentProvince.name : 'china'
      var params = {
        flag: 0
      }

      if (!currentName && !currentProvince) {
        // this.viewFullName = '全国'
      } else {
        // this.viewFullName = currentProvince ? currentProvince.name : currentName
        if (currentProvince) {
          params.name = currentProvince.fullName
          params.flag = 1 // 0-中国 1-省份 2-城市
          this.mapType = currentProvince ? currentProvince.name : 'china'
        } else {
          params.name = currentName
          params.flag = 2
        }
        var statisticsData = this.chinaData.find(item => {
          return item.name == currentName
        })
        if (statisticsData) {
          this.statisticsData = statisticsData
          localStorage.setItem('statisticsData', JSON.stringify(statisticsData))
        }
      }
      this.getInfoBy(params)
      this.getBills(params)
    },

    getCityData (params) {
      this.currentCity = params
    },

    goToChina () {
      this.reload()
    },

    gotoStatus (name, type, status) {
      var flag = this.currentCity ? 2 : 1
      var areaName = this.currentCity ? this.currentCity.areaName : this.statisticsData.areaName
      // console.log('⭐ flag: ' + flag + ', areaName: ' + areaName + ', name: ' + name + ', type: ' + type + ', status: ' + status)
      this.$router.push({ name: name, params: { type: type, status: status, flag: flag, areaName: areaName } })
    },

    gotoRouter (name, isBeHiring) {
      var flag = this.currentCity ? 2 : 1
      // console.log('⭐ name: ' + name + ', isBeHiring: ' + isBeHiring + ', flag: ' + flag)
      var areaName = this.currentCity ? this.currentCity.areaName : this.statisticsData.areaName
      this.$router.push({ name: name, params: { type: isBeHiring, flag: flag, areaName: areaName } })
    },

    // 获取目标省份下的所有城市
    async getCity (provinceId, len) {
      let resp = await SysAreaApi.getCity(provinceId)
      if (resp.status === 200) {
        var result = resp.data.data.slice(0, len)
        this.cityList = this.cityList.concat(result)
      }
      
      this.cityList.map(item => {
        var name = ''
        if (['内蒙古', '黑龙江', '张家界'].indexOf(item.name.substring(0, 3)) != -1) {
          name = item.name.substring(0, 3)
        } else {
          name = item.name.substring(0, 2)
        }
        item.name = name
        item.value = Math.floor(Math.random() * 20)
      })
    },
  }
}
</script>

<style lang="less" scoped>
  .child-bg{
    height: 100%;
    // background: #e8f6ff;
    padding: 0;
    border: solid 1px #d3f3ff;
    position: relative;
    background-image: linear-gradient(30deg, #e8f6ff 0%, #d3f3ff 100%);
    // overflow: hidden;
    overflow-y: scroll;
    padding: -25px -18px -18px -18px;
    .btn-china{
      position: fixed;
      top: 80px;
      left: 276px;
      z-index: 9;
    }
    .data-statistics{
      width: 360px;
      position: fixed;
      bottom: 20px;
      left: 276px;
      z-index: 9;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
      .data-statistics-title{
        background: #6190e0;
        color: #fff;
        line-height: 44px;
        font-size: 16px;
        text-align: center;
        padding: 0 15px;
        letter-spacing: 1px;
      }
      .data-statistics-cont{
        padding: 10px;
      }
    }
    .sm-echats{
      position: absolute;
      top: 0;
      right: 0;
      width: 30%;
      // height: 100%;
      padding: 10px;
      z-index: 1;
      // overflow-y: scroll;
    }
  }
</style>
